<template>
		<view class="body">
			<view class="header-title">忘记密码</view>
			<template>
				<view class="login-input-box">
					<view class="phone u-f-ajc login-font-color">+86<u-icon name="arrow-right"></u-icon></view>
					<input type="number" class="phone-input" @input="phoneInput" placeholder="请输入您的手机号" placeholder-style='color:#c0c4cc'/>
				</view>
				<view class="login-input-box">
					<input :password="passwordShow" @input="passwordInput" placeholder="请输入密码(6-15位数字/字母组合)" placeholder-style='color:#c0c4cc'/>
					<view class="eye-pwd u-f-ajc" @click="passwordShowEvent">
						<view class="u-f-ajc"><u-icon :name="passwordShow?'eye-fill':'eye-off'"></u-icon></view>
					</view>
				</view>
				<view class="login-input-box">
					<input :password="againPasswordShow" @input="againPasswordInput" placeholder="请确认新密码(6-15位数字/字母组合)" placeholder-style='color:#c0c4cc' @blur="onPwd"/>
					<view class="eye-pwd u-f-ajc" @click="againPasswordShowEvent">
						<view class="u-f-ajc"><u-icon :name="againPasswordShow?'eye-fill':'eye-off'"></u-icon></view>
					</view>
				</view>
				<view class="login-input-box">
					<input type="number" @input="checknumInput" placeholder="请输入验证码" placeholder-style='color:#c0c4cc'/>
					<view class="send-code u-f-ajc login-font-color yanzhengma" @tap="getCheckNum">
						<view class="u-f-ajc">{{!codetime?'发送验证码':codetime+'S'}}</view>
					</view>
				</view>
			</template>
			<button class="user-set-btn" :class="{'user-set-btn-disable':disabled}"
			type="primary" :loading="loading" @click="confirmUpdate" :disabled="disabled">确认修改</button>
			<u-modal v-model="updateSuccess"  @confirm="confirmToLogin" :confirm-text="confirmText" :confirm-style="{color: '#5880FF',fontSize:'30upx',fontWeight:'700'}" :content="successContent"></u-modal>
	       </view>
</template>

<script>
	import md5 from '../../common/md5.js';
	import {SendCodeMixin} from '../../mixins/loginMixins.js';
	export default {
		 mixins: [SendCodeMixin],
		data() {
			return {
				updateSuccess:false,
				loading:false,
				disabled:true,
				passwordShow:true,
				againPasswordShow:true,
				successContent:'修改成功',
				confirmText:'重新登录',
				phone:"",
				password:"",
				againpassword:"",
				checknum:"",
			}
		},
		onLoad() {
			uni.hideHomeButton()		
		},
		methods: {
			//显示密码或者隐藏密码
			  passwordShowEvent() {
				  this.passwordShow = !this.passwordShow
			  },
			//显示密码或者隐藏密码
			againPasswordShowEvent() {
			  this.againPasswordShow = !this.againPasswordShow
			},
			// 验证手机号码
			isPhone(){
				let mPattern = /^1[345678]\d{9}$/; 
				return mPattern.test(this.mobile);
			},
			//监听输入的手机号
			phoneInput(event){
				this.phone = event.detail.value
				this.OnBtnChange();
			},
			//监听输入的密码
			passwordInput(event){
				this.password = event.detail.value
				this.OnBtnChange();
			},
			//监听输入的确认密码
			againPasswordInput(event){
				this.againpassword = event.detail.value
				this.OnBtnChange();
			},
			//监听输入的验证码
			checknumInput(event){
				this.checknum = event.detail.value
				this.OnBtnChange();
			},
			// 改变按钮状态
			OnBtnChange(){
				if(this.againpassword && this.password && this.phone && this.checknum){
					this.disabled=false; return;
				}
				this.disabled=true;
			},
			//监听两次密码是否一致
			onPwd(){
				if(this.password !== this.againpassword){
					uni.showToast({ title: '两次输入密码不一致！', icon:"none" });
					return;
				}
			},
			// 获取验证码
			getCheckNum(){
				//引入发送验证码方法
				this.sendCodeUtil(this.phone,'3')
			},
			//确认修改密码
			confirmUpdate(){
				if(this.password !== this.againpassword){
					uni.showToast({ title: '两次输入密码不一致！', icon:"none" });
					return;
				}
				let params = {
					mobile:this.phone,
					password:md5.hex_md5(this.password),
					captcha:this.checknum
				}
				this.$store.dispatch('resetPwd',params).then(res=>{
					if(res.data.errorCode === 0){
						this.updateSuccess = true
					}
				})
			},
			//去登录
			confirmToLogin(){
				uni.removeStorageSync('token')
				uni.removeStorageSync('userInfo')
				uni.removeStorageSync('factoryinfo')
				uni.reLaunch({
				    url: '/pages/login/login'
				});
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #fff;
}
phone-code-extend{
	position: absolute;
	top: 0;
	height: 100%;
	z-index: 100;
}
.login-font-color{ color: #5880FF; }
.body{
	padding: 0 30upx!important;
	.header-title{
	  margin-top: 40upx;
	  font-size: 55upx;
	  font-weight: 700;
	  line-height: 130upx;
	}
	.login-input-box{
		position: relative;
		font-size: 30upx;
		border-bottom: 1upx solid #F4F4F4;
		margin: 80upx 0;
		input {
			height: 2.2rem;
			font-size: 34upx !important;
		}
		.phone-input{
			padding-left: 100upx;
		}
		.eye-pwd{
			@extend phone-code-extend;
			width: 60upx;
			right: 0;
			z-index: 99999;
		}
		.phone{
			@extend phone-code-extend;
			width:100upx;
			left: 0;
			font-weight: bold;
		}
		.send-code{
			@extend phone-code-extend;
			width: 150upx;
			right: 0;
		}
		.yanzhengma view{
			background: #EEEEEE;
			border-radius: 10upx;
			font-size: 25upx;
			width: 150upx;
			padding: 10upx 0;
		}
	}
}
</style>